<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="shortcut icon" href="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WCVLT5Dp5oYAAAAAAAAAAAAADmJ7AQ/original">
    <title>{{ l7vp.page_title }}</title>
    <!-- CSS Dependencies -->
    {% for asset in l7vp.dependencies.cssAssets %}
    <link rel="stylesheet" href="{{ asset }}"></link>
    {% endfor %}
    <!-- JS Dependencies -->
    {% for asset in l7vp.dependencies.jsAssets %}
    <script type="text/javascript" crossorigin src="{{ asset }}"></script>
    {% endfor %}
    <script>
      // 高德或 Mapbox 的 token，默认使用内置的 token，生产环境务必自行注册 Token 确保服务稳定!
      const MAP_TOKEN = undefined // 替换为您申请的 token！
      // 如果是高德，在2021年12月02日申请以后的 key 需要配合您的安全密钥一起使用
      // window._AMapSecurityConfig = { securityJsCode: "替换为您申请的安全密钥！" }
    </script>
  </head>
  <body>
    <style>
      div.pyl7vp-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      /* 地图版权遮挡控件问题 */
      .amap-copyright {
        left: 350px;
      }
      {% if l7vp.read_only %}
      /* 编辑态只预览模式 */
      div.pyl7vp-container .li-editor .li-editor-layout__left {
        display: none;
      }
      {% endif %}
    </style>

    <div id="{{ l7vp.instance_id }}" class="pyl7vp-container"></div>

    <!-- LI Assets -->
    <script>
      const { parseAssetPackage, parserDataWithGeo, isLocalDataset } = window.LISDK;
      const assets = ["LICoreAssets", "LIAnalysisAssets"]
        .map((global) => parseAssetPackage(global))
        .filter((asset) => asset !== undefined);
    </script>

    <!-- LI Datasets -->
    <script>
      const LI_Datasets = {{ l7vp.js_datasets }}
    </script>

    <!-- LI ApplicationConfig -->
    <script>
    const LI_Config = {{ l7vp.js_app_config }}
    LI_Config.datasets = LI_Datasets.map(dataset => {
      if (isLocalDataset(dataset)) {
        return {...dataset, data: parserDataWithGeo(dataset.data)}
      }

      return dataset
    })
    if (MAP_TOKEN) LI_Config.spec.map.config.token = MAP_TOKEN
    </script>

     <!-- LI Theme -->
    <script>
      const LI_Theme = "{{ l7vp.theme }}"
      const _theme = window.antd.theme;
      const _lightTheme = {
        token: {
          colorPrimary: "#8274FF",
          colorInfo: "#8274FF",
        },
      }
      const _darkTheme = {
        algorithm: _theme.darkAlgorithm,
        token: {
          colorPrimary: "#8274FF",
          colorTextBase: "rgba(255,255,255,0.85)",
          colorBgBase: "#1d1e25",
          colorInfo: "#8274FF",
          borderRadius: 6,
        },
      }
      const Antd_Theme = LI_Theme === "light" ? _lightTheme : _darkTheme
    </script>

    {% if l7vp.app_mode %}
    <!-- Render LI App -->
    <script>
      const { ConfigProvider, theme } = window.antd;
      const { LocationInsightApp } = window.LISDK;

      function LIAppElement() {
        const { token } = theme.useToken();
        const inheritedStyle = { color: token.colorText, fontSize: token.fontSize, fontFamily: token.fontFamily, lineHeight: token.lineHeight, background: token.colorBgLayout, }

        return React.createElement(LocationInsightApp, {
          assets,
          config: LI_Config,
          style: { position: "relative", width: "100%", height: "100%", ...inheritedStyle, },
        });
      };

      const App = React.createElement(ConfigProvider, { theme: Antd_Theme }, React.createElement(LIAppElement, null));

      ReactDOM.render(App, document.getElementById("{{ l7vp.instance_id }}"));
    </script>
    {% else %}
    <!-- Render LI Editor -->
    <script>
      const { ConfigProvider, theme } = window.antd;
      const { LocationInsightEditor } = window.LIEditor;

      function LIEditorElement() {
        const { token } = theme.useToken();
        const inheritedStyle = { color: token.colorText, fontSize: token.fontSize, fontFamily: token.fontFamily, lineHeight: token.lineHeight, background: token.colorBgLayout, }

        return React.createElement(LocationInsightEditor, {
          assets,
          defaultApplication: LI_Config,
          style: { position: "relative", width: "100%", height: "100%", ...inheritedStyle, },
        });
      };

      const App = React.createElement(ConfigProvider, { theme: Antd_Theme }, React.createElement(LIEditorElement, null));

      ReactDOM.render(App, document.getElementById("{{ l7vp.instance_id }}"));
    </script>
    {% endif %}
    <!-- Google Analytics，用于调研分析 L7VP 使用情况，可以删掉 -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-N97Y9S4GLG" crossorigin></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag("js", new Date());
      gtag("config", "G-N97Y9S4GLG", { app_type: "pyl7vp-app" });
    </script>
    <!-- Baidu tongji，用于调研分析 L7VP 使用情况，可以删掉 -->
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c2b82edd7b45aa4aa6f9f31c1155db0f";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })()
    </script>
  </body>
</html>
